<template>
    <div class="app-container">
        <el-form ref="objectForm" :model="object" :rules="objectRules" label-width="150px">
            <title-container :describe="message" />
            <el-row class="gpo-form mt-20">
                <el-form-item label="优惠券类型：" prop="activityTheme">
                    <el-input v-model="object.activityTheme"/>
                </el-form-item>
                <el-form-item label="优惠券名称：" prop="activityTheme">
                    <el-input v-model="object.activityTheme"/>
                </el-form-item>
                <el-form-item label="适用平台：" prop="activityTheme">
                    <el-input v-model="object.activityTheme"/>
                </el-form-item>
                <el-form-item label="总发行量：" prop="activityTheme">
                    <el-input v-model="object.activityTheme"/>
                </el-form-item>
                <el-form-item label="面额：" prop="activityTheme">
                    <el-input v-model="object.activityTheme"/>
                </el-form-item>
                <el-form-item label="每人限领：" prop="activityTheme">
                    <el-input v-model="object.activityTheme"/>
                </el-form-item>
                <el-form-item label="有效期：" prop="informationType">
                    <el-date-picker
                            v-model="object.activeTime"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            value-format="yyyy-MM-dd"
                            end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="优惠头图：" prop="thumb">
                    <single-image
                            :images="fileList"
                            :time="false"
                            @success="setImage"/>
                </el-form-item>
            </el-row>
            <!--参与项目-->
            <el-row :gutter="24">
                <el-row>
                    <el-col :span="12">
                        <div style="border-left: 4px solid #4C7FD7; padding-left: 18px;margin-top: 5px" class="font16 color-333">参与项目</div>
                    </el-col>
                    <el-col :span="12" class="text-right">
                        <el-button icon="el-icon-circle-plus-outline" class="border-4C7FD7 color-4C7FD7" style="padding: 5px 10px;" @click="showDialog1">新增</el-button>
                    </el-col>
                </el-row>
                <el-row class="mt-15">
                    <el-table :data="object.projectList" :header-cell-style="{background:'#F1F3F5',color:'#666666'}" border fit highlight-current-row style="width: 100%">
                        <el-table-column align="center" label="楼盘名称">
                            <template slot-scope="scope">
                                <span>{{ scope.row.buildingName}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" label="均价">
                            <template slot-scope="scope">
                                <span>{{ scope.row.averagePrice}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" label="地址">
                            <template slot-scope="scope">
                                <span>{{ scope.row.address}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" label="操作" width="65">
                            <template slot-scope="scope">
                                <el-button type="text" @click="deleteIndex(scope.$index)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-row>
            </el-row>
        </el-form>
        <div class="gpo-btn text-center mt-20" >
            <el-button type="primary" class="gpo-btn_small" @click="onBack">返回</el-button>
            <el-button type="primary" class="gpo-btn_small" @click="onSubmit(message)">提交</el-button>
        </div>
        <!-- 展示所有项目 -->
        <!-- 新增修改 -->
        <el-dialog :visible.sync="dialogFormVisible1" title="新增分类" width="650px">
            <el-row>
                <el-form label-width="90px">
                    <el-row :gutter="10">
                        <el-col :span="16">
                            <el-form-item label="楼盘名称：" >
                                <el-input v-model="listQuery.buildingName" placeholder="姓名"/>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4" class="text-center">
                            <el-button type="" class="border-4C7FD7 color-4C7FD7" icon="el-icon-search" @click="searchList">查询</el-button>
                        </el-col>
                    </el-row>
                </el-form>
            </el-row>
            <el-row>
                <el-table
                        v-loading="listLoading"
                        :data="list"
                        border
                        fit
                        highlight-current-row
                        @selection-change="handleSelectionChange"
                        style="width: 100%;">
                    <el-table-column
                            type="selection"
                            width="55"/>
                    <el-table-column label="楼盘名称" align="center">
                        <template slot-scope="scope">
                            <span>{{ scope.row.object.buildingName }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="均价" align="center">
                        <template slot-scope="scope">
                            <span>{{ scope.row.object.sellingPrice }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="物业公司" align="center">
                        <template slot-scope="scope">
                            <span>{{ scope.row.object.propertyCompany }}</span>
                        </template>
                    </el-table-column>
                </el-table>
            </el-row>
            <div slot="footer" class="dialog-footer text-center">
                <el-button type="primary" :loading="btnLoading" @click="confirm">确认</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    import TitleContainer from '@/components/GpoCommon/TitleContainer'
    import Tinymce from '@/components/Tinymce'
    import SingleImage from '@/components/Upload/singleImage'
    import mixin from './rules/activity.js'
    export default {
        name: 'CreateNews',
        components: { TitleContainer, Tinymce, SingleImage },
        mixins: [mixin],
        data() {
            return {
                message: '新增优惠券',
                fileList: [],
                buildingTypes: [], // 楼盘
                dialogFormVisible1: false,
                listQuery: {
                    level: 'building',
                    buildingName: '',
                    pageNum: 1,
                    pageSize: 10
                },
                object: {
                    'activityTheme': '',
                    'activeTime': '',
                    'applicantsNumber': 1,
                    'status': 0,
                    'activityPicture': '',
                    'activePlace': '',
                    'iconList': [],
                    'activityIntroduction': '',
                    'activityRules': '',
                    'projectList': [],
                    'level2': '',
                    'level1': '',
                    'level': 'activitiesManagement'
                }
            }
        },
        created() {
            if (this.$route.params.id) {
                // this.message = '修改活动'
                // const _this = this
                // searchList({ id: this.$route.params.id }).then((res) => {
                //     this.news = res.data.list ? res.data.list[0] : {}
                // })
            }
            // 初始化楼盘
            let query1 = {
                level: 'building',
                pageSize: 10,
                pageNum: 1
            }
            query1 = this.setListQuery(query1)
            this.searchListAll(query1).then((res) => {
                this.buildingTypes = res.data.list
            })
        },
        methods: {
            // showDialog
            showDialog1() {
                this.dialogFormVisible1 = true
                this.searchList()
            },
            confirm() {
                const _this = this
                _.forEach(_this.multipleSelection, function (selected, index) {
                    _this.object.projectList.push({
                        'serialNumber': index+1,
                        'buildingName': selected.object.buildingName,
                        'averagePrice': selected.object.sellingPrice,
                        'address': selected.object.address,
                        'pictureUrl': selected.object.pictureList
                    })
                })
                this.dialogFormVisible1 = false
            },
            deleteIndex(index) {
                this.object.projectList.splice(index,1)
            },
            // 上传多图
            setImage(file) {
                const _this = this
                if (file.length === 0) {
                    this.object.pictureList = []
                    return
                }
                _.forEach(file, function(f) {
                    _this.object.iconList.push(
                        {
                            url: f.imgUrl
                        }
                    )
                })
            }
        }
    }
</script>
